<template>
    <div id="Header">
        <div id="Display_End" @click.stop="">
            <IconHeader />
            <p>智慧工地大屏显示端</p>
        </div>
        <div id="menu">
            <div v-for="(item, $index) in arr" :key="$index" @click.stop="toggle($index)" :class="{ elem, active: $index == active }">{{item }}
            </div>
        </div>
    </div>
</template>
<script>
import IconHeader from './icons/IconHeader.vue';
export default {
    data() {
        return {
            elem: "elem",
            active: 7,//开始是首页
            arr: ["后端管理",
                "进度管理",
                "大机管理",
                "视频监控",
                "风险管理",
                "环境监控",
                "人员管理",
                "首页"
            ]
        }
    },
    components: {
        IconHeader
    },
    methods: {
        toggle(index) {
            this.active = index
             console.log(index);
            switch (index) {
                case 0:
                    this.navigateToBackendManagement();
                    break;
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                    this.navigateToOtherPage();
                    break;
                case 6:
                    this.navigateToStaffPage();
                    break;
                case 7:
                    this.navigateToHome();
                    break;
                default:
                break;
            }
        },



            //跳转到后端管理页面
            navigateToBackendManagement() {
                // this.navigateToPage('/systemHome');
                // this.navigateToPage('/login');
                // 检查 loginFlag 的值
                if (this.$root.$loginFlag) {
                    // 如果 loginFlag 为 true，则导航到系统主页
                    this.navigateToPage('/systemHome');
                } else {
                    // 如果 loginFlag 为 false，则导航到登录页
                    this.navigateToPage('/login');
                }
            },
            // 跳转到首页
            navigateToHome() {
                this.navigateToPage('/home');
            },
            // 跳转到进度管理等页面
            navigateToOtherPage() {
                this.navigateToPage('/otherPage');
            },
            //跳转到人员管理页面
            navigateToStaffPage() {
                this.navigateToPage('/staffPage');
            },
            navigateToPage(route) {
                // 在跳转到页面时，传递参数或其他必要信息
                this.$router.push({ path: route, query: { activeIndex: this.active } });
            },

    },
    created() {
        // 在组件创建时，监听路由变化并更新菜单栏的活动状态
        this.active = this.$route.query.activeIndex || 7;
    }
}
</script>
<style scoped>

@import '../../assets/css/HomeHeader.css';
</style>